<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyMS&trade;</title>
    <link href="/h5/img/easyms.ico" rel="icon" type="image/x-icon">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/material-teal/easyui.css" rel="stylesheet" type="text/css"/>
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/icon.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">

        #mainTab .tabs-panels > .panel > .panel-body {
            overflow: hidden;
        }

        .accordion {
            background: #23262E;
            border-color: #23262E;
        }

        .sidemenu .accordion-header .panel-title {
            color: white;
        }

        .sidemenu .accordion-header .panel-title:hover{
            color: #23262E;
        }

        .sidemenu .tree-node-selected {
            color: #23262E;
        }
        .tree-node {
            color: white;
        }
        .sidemenu .tree-node:hover {
            color: #23262E;
        }
        .define-head {
            font-family: Verdana,Geneva,sans-serif;
            background-color: #EFEFEF;
            height: 55px;
            overflow: hidden;
        }

        .define-head .define-logo {
            height: 52px;
            width: 50%;
            float: left;
        }

        .define-head .define-logo #LoginTopLine {
            letter-spacing: 2px;
            margin: 8px 0px 0px 10px;
            text-shadow: 3px 1px 6px #fff;
            color: #15428B;
            font-size: 26px;
            height: 30px;
            line-height: 30px;
            padding-left: 55px;
        }

        .define-head .define-logo #LoginBotoomLine {
            letter-spacing: 1px;
            text-shadow: 3px 1px 6px #fff;
            color: #15428B;
            font-size: 12px;
            height: 15px;
            line-height: 15px;
            padding-left: 65px;
        }

        .sidemenu-header-cls{
            color: #AAAAAA;
            height: 35px;
        }
        .sidemenu-body-cls{
            color: #AAAAAA;
        }

        .define-menu-panel-header{
            /*background-color: #23262E;*/
            /*color: #2196f3;*/
            height: 32px;
        }

        /*.define-menu-panel-header .panel-title{*/
        /*    color: #2196f3;*/
        /*}*/
    </style>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/plugins/jquery.international.js" type="text/javascript"></script>
    <script src="/index/easyuiLanguagePack" type="text/javascript"></script>
    <script src="/index/languagePack/index/index" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.ajax.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.const.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            token = getCookie(TOKEN_KEY);
            headers[TOKEN_KEY] = token;

            // 加载权限菜单
            ajaxGetAndReturn("/api/auth/menu/getUserAuthMenuTree",{},
                function(data){
                    $('#LeftMenu').sidemenu({
                        data: data,
                        onSelect: onSideMenuSelect,
                        border: false,
                        multiple: false,
                        headerCls: "sidemenu-header-cls",
                        bodyCls: "sidemenu-body-cls"
                    });
                },
                function(data){
                    if(data.code == HTTP_STATUS.ACCESS_DENIED){
                        window.location.href = '/h5/index.html';
                    }else{
                        console.log(data);
                        euShow(langCommon.info,lang.message.fieldToLoadMenu);
                    }
                });

            // 加载语言下拉列表
            let langList = [
                {value:"zh_CN",text:"中文（简体）"},
                {value:"zh_TW",text:"中文（繁體）"},
                {value:"en",text:"English"}
            ];
            loadCombobox("langSelector",langList,onLanguageChange);

            // 加载用户信息
            ajaxGetAndReturn("/api/auth/user/getCurrentUser",{},
                function(data){
                    console.log(data);
                    $("#userInfo").text("【" + data.firstName + " " + data.lastName + "】【 " + data.roleName + "】");
                    // 根据用户设置更新界面语言
                    let language = data.language;
                    setCookie(LANG_KEY,language);
                    setValue4Combobox("langSelector",language);
                },
                function(data){
                    console.log(data);
                    euShow(langCommon.info,lang.message.fieldToLoadUserInfo);
                }
            );

            // 加载版本信息
            $("#version").load(API_URL+"/index/getVersion");

            $("#resetPwdLink").attr("title",lang.modifyPassword);
            $("#logoutLink").attr("title",lang.exitSystem);
            setEuButtonText("savePwdBtn", langCommon.confirm);
            setEuButtonText("closePwdSetBtn", langCommon.back);
            setTitleForPanel("LeftMenu","&nbsp;" + lang.guideList);
            setText("pwdOldTag", lang.pwdOld);
            setText("pwdNewTag", lang.pwdNew);
            setText("pwdRetype", lang.pwdRetype);

        });

        // 退出登陆
        function logout(){
            euConfirm(langCommon.info,lang.message.exitConfirmMsg,function(){
                ajaxPostBodyAndCallback("/api/auth/user/logout",{},
                    function(data){
                        window.location.href = '/h5/index.html';
                    }
                );
            });
        }

        // 更新语言设置
        function onLanguageChange(record) {
            console.log(record);
            if (record == null || record.value == null) {
                return;
            }
            let language = getCookie(LANG_KEY);
            if(language != record.value){
                showProgress(langCommon.info,lang.message.switchingLang);
                ajaxPostParamAndCallback("/api/auth/user/updateUserLanguage",{language:record.value},function(){
                    setCookie(LANG_KEY,record.value);
                    location.href = "/h5/module/main.html";
                });
            }
        }

        function openMenuPanel(){
            let menuPanelOpts = $("#menuPanel").panel("options");
            console.log(menuPanelOpts);
            $("#menuPanel").panel(menuPanelOpts.collapsed ? "expand":"collapse",true);
        }

        // 修改密码
        function savePwd() {
            if (!formValidate("modifyPwdForm")) {
                return;
            }
            let newPwd = getEUTextboxValue("PASSWORD_NEW");
            let oldPwd = getEUTextboxValue("PASSWORD_OLD");
            ajaxPostBodyAndCallback("/api/auth/user/changePassword", {newPwd: newPwd, oldPwd: oldPwd}, function (data) {
                euShow(langCommon.info,langCommon.message.operationSuccess);
            });
        }

        // 打开修改密码面板
        function openModifyPasswordDialog() {
            euTextboxRemoteValidate("PASSWORD_OLD", "/api/auth/user/checkPassword", "password", lang.message.errorPwd);
            openDialog("modifyPwdDlg", lang.modifyPassword);
        }

        // 关闭修改密码面板
        function closePasswordModifyDialog() {
            setEuButtonText("submitBtn", lang.login);
            setEuButtonDisabled("submitBtn", false);
            resetFrom("modifyPwdForm");
            closeDialog("modifyPwdDlg");
        }

        function onPanelOpen() {
            let panel = $(this);
            let _1e = panel.panel("header").children("div.panel-tool");
            _1e.children("a.panel-tool-collapse").hide();

            let _20 = "layout-button-left";// + _1f[dir];
            let t = _1e.children("a." + _20);
            if (!t.length) {
                t = $("<a href=\"javascript:;\"></a>").addClass(_20).appendTo(_1e);
                t.bind("click", { dir: "left" }, function (e) {
                    if (e.target.className == "layout-button-right") {
                        e.target.className = "layout-button-left"
                        onWestExpand();
                        panel.panel("setTitle", panel.titleTemp);
                        panel.panel('resize', {
                            width: 202
                        });

                        let leftMenuDiv = $('#LeftMenuDiv');
                        leftMenuDiv.each(function () {
                            this.style.width = '202px';
                        });
                    }
                    else {
                        e.target.className = "layout-button-right"
                        onWestCollapse();
                        let opt = panel.panel('options');
                        panel.titleTemp = opt.title;
                        panel.panel("setTitle", "");
                        panel.panel('resize', {
                            width: 42
                        });

                        let leftMenuDiv = $('#LeftMenuDiv');
                        leftMenuDiv.each(function () {
                            this.style.width = '42px';
                        });
                    }

                    return false;
                });
            }
            //$(this).panel("options").collapsible ? t.show() : t.hide();
        }

        function onTabSelect(title, index) {
            let tabs = $('#mainTab');
            let tab = tabs.tabs('getTab', index);
            $('#mainTab').tabs("resize");
            let menus = $('#LeftMenu');
            if (menus.hasClass('sidemenu')) {
                let opts = menus.sidemenu("options");
                changeMenuSelect(menus, opts, tab[0].id);
            }
        }

        function onWestCollapse() {
            let opts = $('#LeftMenu').sidemenu('options');
            if (opts.collapsed != 'collapse') {
                $('#LeftMenu').sidemenu('collapse');
                $('#LeftMenu').sidemenu('resize', {
                    width: 40
                });
            }
        }

        function onWestExpand() {
            let opts = $('#LeftMenu').sidemenu('options');
            if (opts.collapsed != 'expand') {
                $('#LeftMenu').sidemenu('expand');
                $('#LeftMenu').sidemenu('resize', {
                    width: 200
                });
            }
        }

        function onSideMenuSelect(item) {
            if (!$('#mainTab').tabs('exists', item.text)) {
                $('#mainTab').tabs('add', {
                    title: item.text,
                    content: '<iframe scrolling="auto" frameborder="0"  src="' + item.url + '" style="width:100%;height:100%;"></iframe>',
                    closable: true,
                    fit: true,
                    icon: item.iconCls,
                    id: item.id
                });
            } else {
                $('#mainTab').tabs('select', item.text);
            }
            addTabMenu();
        }

        function addTabMenu() {
            /* 双击关闭TAB选项卡 */
            $(".tabs-inner").dblclick(function () {
                let subtitle = $(this).children(".tabs-closable").text();
                $('#mainTab').tabs('close', subtitle);
            });
            /* 为选项卡绑定右键 */
            $(".tabs-inner").bind('contextmenu', function (e) {
                $('#tab_menu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });

                let subtitle = $(this).children(".tabs-closable").text();

                $('#tab_menu').data("currtab", subtitle);
                $('#mainTab').tabs('select', subtitle);
                return false;
            });
        }

        function changeMenuSelect(menus, opts, selectId) {
            let menutrees = menus.find(".sidemenu-tree");
            menutrees.each(function () {
                let menuItem = $(this);
                changeMenuStyle(menuItem, opts, selectId);
            });

            let tooltips = menus.find(".tooltip-f");
            tooltips.each(function () {
                let menuItem = $(this);
                let tip = menuItem.tooltip("tip");
                if (tip) {
                    tip.find(".sidemenu-tree").each(function () {
                        changeMenuStyle($(this), opts, selectId);
                    });
                    menuItem.tooltip("reposition");
                }
            });
        }

        function changeMenuStyle(menuItem, opts, selectId) {
            menuItem.find("div.tree-node-selected").removeClass("tree-node-selected");
            let node = menuItem.tree("find", selectId);
            if (node) {
                $(node.target).addClass("tree-node-selected");
                opts.selectedItemId = node.id;
                menuItem.trigger("mouseleave.sidemenu");
            }
            changeMenuSelect(menuItem);
        }

    </script>
</head>
<body class="easyui-layout" id="mainLayout">
<div data-options="region:'north',border:false" style="height: 46px">
    <table border="0" cellpadding="0" cellspacing="0" height="100%" style="background: #23262E;" width="100%">
        <tr style="height: 38px">
            <td style="width: 300px;">
                <span class="icon_java" style="margin-left: 10px;float: left;width: 40px;height: 36px"></span>
                <span style="font-size: 24px;margin-left: 10px;margin-top: 4px;float: left;color: white">EasyMS Platform</span>
                <span style="float: right">&nbsp;&nbsp;</span>
                <a href="#" style="float:right;color:white;margin-top: 18px;">湖南工学院&nbsp;软件1601-廖略辉&nbsp;毕业设计作品&nbsp;</a>
                <span style="float: right">&nbsp;&nbsp;</span>
                <a href="https://gitee.com/liaolvehui/easyms" style="float:right;color: white;margin-top: 18px;" target="_blank">https://gitee.com/liaolvehui/easyms</a>
            </td>
        </tr>
    </table>
</div>
<div data-options="region:'center',border:false">
    <div class="easyui-layout" style="height: 100%;width: 100%">
        <div region="center" border="false">
            <div class="easyui-tabs" data-options="fit:true,pill:true,border:false,onSelect:onTabSelect" id="mainTab">
                <div id="mainPageTab" data-options="fit:true,iconCls:'icon_main',closable:false" style="overflow:hidden;background-color:#fff;">
                    <iframe scrolling="auto" frameborder="0" src="/h5/module/dashboard.html" style="width:100%;height:100%;"></iframe>
                </div>
            </div>
        </div>
        <div region="west" id="LeftMenu" border="false" title="&nbsp;" style="width: 220px;" data-options="headerCls:'sidemenu-header-cls',bodyCls:'sidemenu-body-cls',iconCls:'easyms_apps'"  >

        </div>
    </div>
</div>
<div data-options="region:'south',border:false" style="height:30px;border-top: solid #dfdfdf 1px;">
    <table border="0" cellpadding="0" cellspacing="0" style="height: 100%;width: 100%" >
        <tr>
            <td width="30"><a><span class="easyms_account" style="float:left;width: 28px;height: 28px" ></span></a></td>
            <td width="220">
                <span style="float:left;" id="userInfo"></span>
            </td>
            <td width="130">
                <input class="easyui-combobox" id="langSelector" name="language" data-options="editable:false,panelHeight:100" style="width:120px;height: 28px" />
            </td>
            <td width="30">
                <a id="resetPwdLink" href="javascript:openModifyPasswordDialog()" class="easyms_account_settings" style="float:left;width: 28px;height: 28px" title="&nbsp;"></a>
            </td>
            <td width="30">
                <a id="logoutLink" href="javascript:logout()" class="easyms_exit" style="float:left;width: 28px;height: 28px" title="&nbsp;"></a>
            </td>
            <td>
                <span style="float: right">&nbsp;&nbsp;</span>
                <span style="float: right" id="version"></span>
                <span style="float: right">EasyMS&trade;&nbsp;</span>
            </td>
        </tr>
    </table>
</div>
</body>
<div buttons="#modifyPwdBlg-btn" class="easyui-dialog"
     data-options="iconCls:'icon-edit',modal:true,closed:true" id="modifyPwdDlg">
    <form id="modifyPwdForm" method="post">
        <table cellspacing="2px">
            <tr>
                <td><span id="pwdOldTag" style="width:100px"></span></td>
                <td>
                    <input class="easyui-passwordbox" iconWidth="28" id="PASSWORD_OLD" name="PASSWORD_OLD"
                           style="width:400px;height:34px;padding:10px">
                </td>
            </tr>
            <tr>
                <td id="pwdNewTag" style="width:100px"></td>
                <td>
                    <input class="easyui-passwordbox" iconWidth="28" id="PASSWORD_NEW" name="PASSWORD_NEW"
                           required="true" style="width:400px;height:34px;padding:10px" validType="complexity">
                </td>
            </tr>
            <tr>
                <td id="pwdRetype" style="width:100px"></td>
                <td>
                    <input class="easyui-passwordbox" iconWidth="28" name="PASSWORD_NEW_2"
                           required="true" style="width:400px;height:34px;padding:10px"
                           validType="equals['#PASSWORD_NEW']">
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="modifyPwdBlg-btn">
    <a class="easyui-linkbutton" href="javascript:savePwd()" iconCls="icon-ok" id="savePwdBtn"></a>
    <a class="easyui-linkbutton" href="javascript:closePasswordModifyDialog()" iconCls="icon-no" id="closePwdSetBtn"></a>
</div>
</html>
